<template>
  <div>
    <el-dialog title="编辑用户" v-model="visable" width="50%" :close-on-click-modal="false" draggable style="max-width: 530px;">
      <div class="bs-dialog">
        <el-form
          ref="userRef"
          :model="dialogFormData"
          :rules="dialogFormRules"
          label-width="auto"
          size="small"
          style="width: 80%;margin: auto;"
        >
          <el-form-item label="用户名称:" prop="userName">
            <el-input v-model="dialogFormData.userName" placeholder="请输入用户名称" clearable />
          </el-form-item>
          <el-form-item label="账号:" prop="userAccount">
            <el-input disabled v-model="dialogFormData.userAccount" placeholder="请输入账号" clearable />
          </el-form-item>
          <el-form-item label="密码:" prop="userPwd">
            <el-input v-model="dialogFormData.userPwd" type="password" placeholder="请输入密码" clearable show-password/>
          </el-form-item>
          <el-form-item label="角色:" prop="roleIdList">
            <!-- <el-select v-model="dialogFormData.roleIdList" multiple placeholder="请选择角色" clearable>
              <el-option
                v-for="item in roleDataList"
                :key="item.roleId"
                :label="item.roleName"
                :value="item.roleId"
                 :disabled="item.roleStatus!=1"
              >
            <span style="float: left">{{ item.roleName }}</span>
              <span
                style="
                  float: right;
                  color: var(--el-text-color-secondary);
                  font-size: 13px;
                "
              >
                {{ item.roleStatus==2 ? '已禁用':item.roleStatus==3?'已删除':'' }}
              </span>
            </el-option>
            </el-select> -->
            <el-tree-select
              v-model="dialogFormData.roleIdList"
              :data="roleDataList"
              filterable
              value-key="roleId"
              node-key="roleId"
              :props="{ value: 'roleId', label: 'roleName'}"
              :check-strictly="true"
              clearable
              multiple
              show-checkbox
              check-on-click-node
            >
            </el-tree-select>
          </el-form-item>
          <el-form-item label="状态:" prop="userStatus">
            <el-radio-group v-model="dialogFormData.userStatus">
              <el-radio :label="1">启用</el-radio>
              <el-radio :label="2">冻结</el-radio>
              <el-radio :label="3">删除</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-form>
      </div>
      <template #footer >
        <div class="dialog-footer">
          <el-button size="small" @click="visable = false"> 取消 </el-button>
          <el-button size="small" type="primary" @click="save"> 保存 </el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script>
import { getUser, updateUser } from '@/api/system/user'
import { listAllRole } from '@/api/system/role'
export default {
  data() {
    return {
      visable: false,
      roleDataList: [],
      dialogFormData: {
        userName: '',
        userAccount: '',
        userPwd: '',
        userId: '',
        userStatus: '',
        roleIdList: []
      },
      dialogFormRules: {
        userName: [
          { required: true, message: '请输入用户名称', trigger: ['blur', 'change'] },
          { min: 2, max: 20, message: '2~20字符以内', trigger: ['blur', 'change'] }
        ],
        userAccount: [
          { required: true, message: '请输入账号', trigger: ['blur', 'change'] },
          { min: 3, max: 20, message: '3~20字符以内', trigger: ['blur', 'change'] }
        ],
        userPwd: [
          { required: true, message: '请输入密码', trigger: ['blur', 'change'] },
          { min: 6, max: 20, message: '6~20字符以内', trigger: ['blur', 'change'] }
        ]
      }
    }
  },
  methods: {
    // 打开弹框
    async openModal(userId) {
      await getUser({ 'userId': userId }).then(res => {
        if (res.code === 1) {
          const user = res.data
          this.dialogFormData.userId = user.userId
          this.dialogFormData.userName = user.userName
          this.dialogFormData.userAccount = user.userAccount
          this.dialogFormData.userPwd = user.userPwd
          this.dialogFormData.userStatus = user.userStatus
          this.dialogFormData.roleIdList = user.roleIdList
        }
      })
      // 获取所有角色
      await listAllRole({}).then(res => {
        if (res.code === 1) {
          this.roleDataList = res.data
        }
      })
      this.visable = true
    },
    // 保存
    save() {
      this.$refs['userRef'].validate((valid) => {
        if (valid) {
          updateUser(this.dialogFormData).then(res => {
            if (res.code == 1) {
              this.$message.success('操作成功')
              this.visable = false
              // 刷新父组件中的表格数据
              this.$emit('flushTable', {})
            } else {
              this.$message.error(res.msg)
            }
          }).catch((error) => {
          })
        }
      })
    }

  }
}
</script>
<style scoped>

</style>
